<template>
    <div>
          <h1>权益显示</h1>
          <a href="/qadd">新增权益</a>
          <br>
          <a href="/lshow">会员等级信息</a>
          <br>
          <a href="/show">会员信息</a>
          <br>
          <table class="table">
               <thead>
                    <tr>
                    <td>权益编号</td>
                    <td>权益名称</td>
                    <td>权益状态</td>
                    <td>状态修改</td>
                    <td>修改</td>
                    <td>删除</td>
                   </tr>
               </thead>
               <tbody>
                 <tr v-for="e in data">
                    <td>{{ e.id }}</td>
                    <td>{{ e.quanyiName }}</td>
                    <td>{{ e.qstate?'启用':'禁用' }}</td>
                   <td><input type="button" :value="e.qstate?'禁用':'启用'" @click="upstateinfo(e.id)"></td> 
                   <td><input type="button" value="修改" @click="updateinfo(e.id)"></td>
                   <td><input type="button" value="删除" @click="qdelete(e.id)"></td>
                 </tr> 
               </tbody>
          </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

const router=useRouter();
onMounted(()=>{
    show();
})

const data=ref([{
    "id": 2,
    "quanyiName": "免费洗车",
    "qstate": true
  }])

const show=()=>{
    axios.get("https://localhost:7065/api/Quanyi/Show",{params:data.value}).then(res=>{
        data.value=res.data;
    })
}

//修改状态
const upstateinfo=(val:any)=>{
    if(!confirm("确认修改状态吗"))
{
     return
}
  axios.get("https://localhost:7065/api/Quanyi/UpState",{params:{id:val}}).then(res=>{
     if(res.data>0)
     {
        alert('状态修改成功')
        show();
     }
     else{
        alert("状态修改失败")
        return;
     }
  })
}

//修改跳转
const updateinfo=(val:any)=>{
    if(!confirm("确认修改吗"))
{
     return
}
    router.push({path:"/qup",query:{id:val}})
}

const qdelete=(val:any)=>{
    if(!confirm("确认删除吗"))
{
     return
}
  axios.delete("https://localhost:7065/api/Quanyi/Delete",{params:{id:val}}).then(res=>{
     if(res.data>0)
     {
        alert("删除成功")
        show();
     }
     else{
        alert("删除失败")
        return;
     }
  })
}

</script>

<style scoped>

</style>